<template>
	<view class="container">
		<view class="title">如何添加自定义指标？</view>
		<view class="sub-title">阅读数 1678</view>
		<view class="context">
			<p>
				考评组是同一类型的被考核人的统一管理组合，考评组内的被考
				核人拥有相同或者相似的考核内容，拥有相同或者相似的考评流
				程。考评组是绩效考核的必需载体，考评组可按部门或岗位自由
				组合创建（可以按考勤组理解）。
			</p>	
			<p>【考评组使用场景】
				1、同一个部门的员工，考核内容一致，那么这个部门的所有员工可以设置为一个考评组；
				2、不同部门的部门经理岗位，考核内容一致，那么所有经理可以跨部门设置为一个考评组；
				3、不同部门，不同岗位的员工，统一集中进行了一次集团培训，需要对这次培训结果进行考核，那么这批人可以设置一个独立的考评组在考评组设置中，可以设置考评类型、被考核员工、考评规则、目标制定方式、考评组负责人等。
				1)点击【新增考评组】添加新的考评组；
				2)点击【编辑】对原有考评组进行基础信息、考评规则、指标和考评流程的修改；
				3)点击【删除】，对无效考评组进行删除；
				4)考评组管理员只有权限对考评组进行修改，但是无法删除；
			</p>
		</view>
		
		<!-- 点个赞 -->
		<view @click="clickGood" class="good-container" :class="animateType==1?'bgPoi':'bgPoiNone'">
			<view  class="good animate__animated" :class="animateType==1?'animate__tada active':''">
				<text class="qxfont qx-good-job"></text>
			</view>
			<!-- 点赞飘起来的字体 -->
			<view class="float-text" :class="animateType==1?'float-move':''">赞</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				animateType:0,
				iconType: ['person']
			}
		},
		onLoad(arg) {
			const id = arg.id
			console.log(id)
		},
		methods:{
			// 点赞成功后特效
			clickGood(){
				this.animateType = !this.animateType
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		font-family: '思源黑体';
		padding: 40rpx;
		.title{
			font-size: 48rpx;
			color: #101010;
			margin-bottom: 16rpx;
		}
		.sub-title{
			font-size: 24rpx;
			color: #919191;
			margin-bottom: 26rpx;
		}
		.context{
			font-size: 24rpx;
			color: #2d2d2d;
			line-height: 2;
		}
		// 点个赞
		.good-container{
			position: relative;
			width: 130rpx;
			height: 130rpx;
			margin: 60rpx auto;
			// background: url(../../static/img/twitter_fave.png) no-repeat;
			background-position: 0 0;
			display: flex;
			justify-content: center;
			align-items: center;
			.good{
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 50%;
				background-color: #8f9090;
				// background-color: #007AFF;
				.qx-good-job{
					color: #fff;
					font-size: 40rpx;
				}
			}
			&:hover{
				transition: background 1s steps(50);
			}
			.active{
				background-color: #007AFF;
			}
			// 漂浮字体
			.float-text{
				position: absolute;
				font-size: 22rpx;
				color: #ccc;
				opacity: 0;
			}
			.float-move{
				animation: mymove 5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			}
		}	
		.bgPoi{
			background-position: -3520px 0;
		}.bgPoiNone{
			background-position: 0 0;
		}
		@keyframes mymove{
			from {top:0px;right: 0;opacity: 1;color: #46c7ee;}
			to {top:-50px;right: -50px;opacity: 0;}
		}
	}
</style>
